<template>

  <div class="questions-body">

  <!-- <listView></listView> -->
  <div class="top-tis">
    <Breadcrumb>
          <Breadcrumb-item>你当前位置</Breadcrumb-item>
          <Breadcrumb-item href="/index">首页</Breadcrumb-item>
         <Breadcrumb-item>术语学习</Breadcrumb-item>
      </Breadcrumb>
  </div>  

  <div class="content-search">
    
    <Input v-model="searchText"  placeholder="请输入中文或英文搜索术语...">
        
        <Button slot="append" @click="searchBtn" icon="ios-search" ></Button>

    </Input>  

  </div>

  <div class="questions-view">

    <Table :columns="columns" :data="termlist"></Table>

    <li style="margin:0 auto">
          <div style="padding:10px 20px;margin-left:30%;">
              <pagination :pagination="pagination"  @pagination="handlePage"></pagination>
          </div>
    </li>

  </div>


  <div>
    
    <Modal
            title="查看术语提示"
            v-model="tipsBuyCard"
            @on-ok="doPayGold"
           >

           <p>查看术语需要会员卡哦，开通会员后享受更多的优惠！</p>
            
    </Modal>
  </div>
  
  </div>
</template>
<style scoped>
   
@import '../../assets/css/ccm.css';

  
  
</style>

<script>
import pagination from "../../components/pagination.vue";

export default {
  components:{
     pagination,
  },
          
  data(){

    return {
      member_card: null,
      tipsBuyCard:false,
      termlist:[],
      searchText:'',

      pagination: {
        total: 0,
        count: 0,
        per_page: 0,
        current_page: 1,
        total_pages: 0
      },

      columns: [
            
            {
                title: 'Glossary',
                key: 'english',
                align: 'left',
                width:168,
            },

//          {
//              title: '术语（中文）',
//              key: 'chinese',
//              align: 'left',
//              width:168,
//          },

            
//          {
//              title: '定义（中文）',
//              key: 'defines',
//              align: 'left',
//              width:168,
//          },
            {
                title: 'Definition',
                key: 'english_defines',
                align: 'left',
            },
            {
              title: '详情',
              key: 'action',
              width: 168,
              align: 'center',
              render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                              type: 'success',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {

                                  if( this.member_card  == undefined || this.member_card == null){

                                      this.tipsBuyCard = true;

                                      return;

                                  }else{

                                    this.routeLink('/term-content?id=' + params.row.id);

                                  }

                              }
                          }
                      }, '中英文'),
                  ]);
              }
          }
        ],
    }

  },
  created() {

    this.getCarousel();
    this.fetchCard();

  },
   watch: {
      $route() {
        this.getCarousel();
      }
  },
  methods:{

    getCarousel(){


      this.$store.commit('mainLoading', true);

      let query = this.$route.query;

      query.include = "category";

      this.$http.get('/term/list',{parames:query}).then(
        termlist => {

          this.termlist = termlist.data.data;

          this.pagination = termlist.data.meta.pagination;

          this.$store.commit('mainLoading', false);

          }).catch(err => {

            this.$Message.error( 'termlist');
        
        })
    },// 共用跳转功能
      routeLink(link) {
          this.$router.push({path: link});
      },

      doPayGold(){  

        this.routeLink('/personal?name=card');

      },

      // 分页方法
      handlePage(current) {
        this.pagination.current_page = current;
        this.search();
      },

      // 检索按钮方法
      search() {
        let query = {
          page: this.pagination.current_page,
          category: this.$route.query.category,
          name: this.$route.query.name
        };
        this.$router.push({path: this.$route.path, query});
      },

      // 查找有没会员卡
      fetchCard() {
            this.$store.commit('mainLoading', true);
                
              this.$http.get('/member/me?include=statute,term' ).then(rets => {

                  this.member_card  = rets.data.data.term;

              }).catch(err => {

                  this.$Message.error( '请登录..');
              
              })

       },
       
      searchBtn(){

        var searchTextKey = this.searchText;

        var language = (  /^[\u4e00-\u9fa5]+$/i.test(searchTextKey)  )  ? 'chinese' : 'english' ;


        if( searchTextKey =='' ){

          this.$Message.error( '请输入中文或英文搜索术语..');

          return;

        }else{

            this.$store.commit('mainLoading', true);

            this.$http.get('/term/list/?include=category&' + language  + ' = ' + searchTextKey).then(
              res => {  

                  this.termlist = res.data.data;

                  this.$store.commit('mainLoading', false);

                }).catch(err => {

                  this.$Message.error( 'termlist');
              
              })
           

        }


      }
      
  }
}
</script>

